<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack"> 
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>回复</p>
		</div>
		<div class="reply-content">
			<ul class="reply-list" v-if="isReplyad">
				<li @click="handleDetails(item.comment_id,item.comment_articleId)" v-for="(item,index) in list">
					<div class="list-top">
						<div class="top-left">
							<div class="handimg">
								<b v-if="item.read!=0"></b>
								<img :src="item.user_himg ? item.user_himg : defalut"/>
							</div>
							<div class="name">
								<p>{{item.user_nickname}}</p>
							</div>
						</div>
						<div class="time">
							<img src="../../../assets/images/mine/time.png"/>
							<span>{{item.comment_time}}</span>
						</div>
					</div>
					<p class="ask" v-if="item.type=='a'"><span style="font-size: 10px;margin-left: 9px;">内容:</span> {{item.comment_desc}}</p>
					<p class="ask" v-else><span style="font-size: 10px;margin-left: 9px;">内容:</span> {{item.reply.comment_desc}}</p>
					<div class="list-bottom">
						<span class="reply">回复</span>
						<div>
							<span v-if="item.type=='a'">主题: {{item.article_title}}</span> 
							<span v-else><b style="color: skyblue;font-weight: normal;">{{item.reply.user_nickname}}</b> ：{{item.comment_desc}}</span>
						</div>
					</div>
				</li>
				<!--<li @click="handleDetails(item.comment_id,item.comment_articleId)" v-for="(item,index) in list" v-if="item.type=='r'">
					<div class="list-top">
						<div class="top-left">
							<div class="handimg">
								<b v-if="item.read!=0"></b>
								<img :src="item.user_himg ? item.user_himg : defalut"/>
							</div>
							<div class="name">
								<p>{{item.user_nickname}}</p>
							</div>
						</div>
						<div class="time">
							<img src="../../../assets/images/mine/time.png"/>
							<span>{{item.comment_time}}</span>
						</div>
					</div>
					<p class="ask"><span style="font-size: 10px;margin-left: 9px;">内容:</span> {{item.reply.comment_desc}}</p>
					<div class="list-bottom">
						<span class="reply">回复</span>
						<div class="">
							<span><b style="color: skyblue;font-weight: normal;">{{item.reply.user_nickname}}</b> ：{{item.comment_desc}}</span>
						</div>
					</div>
				</li>-->
			</ul>
			<div class="list-img-pic" v-else>
				<nocontent></nocontent>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	import user from '../../../utils/isLogin';
	import defalut from '../../../assets/default.jpg';
	import Nocontent from '@/components/home/no-content';
	export default{
		data(){
			return{
				list:[],
				listDate:[],
				defalut: defalut,
				isClick:true,
				isReplyad:true
			}
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		components:{
			Nocontent
		},
		created(){
					    
			var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
			axios.post(user.src + '/index/comment/reply_to_mycomment' , {
				userId: userId
			})
			.then(res=> {
				if(res.data.status == 1066){
					this.isReplyad = false;
				}
				if(res.data.status == 2001){
					this.list = res.data.data;
					this.isReplyad = true;
				}
			})
			.catch(error=>{
				console.log(error)
			});
				
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		   } else {
		      document.addEventListener("plusready", plusReady, false);
		   }
		},
		methods:{
			handleBack(){
				var reply = plus.webview.currentWebview();
				plus.webview.close(reply);
			},
			handleDetails (id,recId) {
				if(this.isClick){
					this.isClick = false;
					var postDetails = plus.webview.create('postDetails.html','postDetails',{scrollIndicator:'none'},{
						commentId:id,
						articleId:recId,
						type:2
					});
					postDetails.addEventListener("loaded", ()=> {
					   postDetails.show('pop-in', 300);
					   plus.webview.getWebviewById('reply').reload();
				    	this.isClick = true;
					   postDetails = null;
					}, false);
				}
			}
		}
	}
</script>

<style lang='less' scoped>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.reply-content{
		padding-top: 130px;
		width: 100%;
		.reply-list{
			padding: 0 24px;
			li{
				padding: 32px 0 40px 0;
				.list-top{
					display: flex;
					justify-content: space-between;
					.top-left{
						display: flex;
						justify-content: space-between;
						.handimg{
							position: relative;
							width: 65px;
							height: 65px;
							border-radius: 50%;
							b{
								position: absolute;
								left:0px;
								top: 0px;
								background: red;
								width: 16px;
								height: 16px;
								border-radius: 50%;
							}
							img{
								display: block;
								width: 65px;
								height: 65px;
								border-radius: 50%;
							}
						}
						.name{
							padding: 19px 0 0 18px;
							p{
								font-weight: bold;
								font-size: 26px;
								color: #000;
							}
						}
					}
					.time{
						display: flex;

						img{
							display: block;
							width: 27px;
							height: 27px;
						}
						span{
							margin-left: 10px;
							font-size: 22px;
							color:33px;
						}
					}
				}
				.ask{
					margin-top: 10px;
					padding-left: 82px;
					line-height: 26px;
					font-size: 26px;
					color: #333;
				}
				.list-bottom{
					padding-top: 24px;
					line-height: 40px;
					display: flex;
					span{
						display: block;
						font-size: 21px;
						color: #333;
					}
					.reply{
						margin-right: 18px;
						padding: 0 20px;
						line-height: 40px;
						height: 40px;
						border-radius: 10px;
						background: #eff3f6;
					}
				}
			}
		}
	}
	.list-img-pic{
		height: 800px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>